import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";

const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper(200);
// scene.add(axesHelper);

// 设置宽高
const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

//单独创建一个 PerspectiveCamera，传入 CameraHelper：
const camera2 = new THREE.PerspectiveCamera(20, 16 / 9, 100, 300); // 相机的 FOV(视野角度)，长宽比，近裁剪面，远裁剪面
const cameraHelper = new THREE.CameraHelper(camera2);
scene.add(cameraHelper);

//添加GUI调试
const gui = new GUI();

function onChange() {
  camera2.updateProjectionMatrix();
  cameraHelper.update();
}

// fov：影响可视范围角度、离物体远近
// aspect：可视范围宽高比，一般设置网页宽高比
// near：近裁截面距离，一般保持默认值 0.1，当你需要截掉一些特别近的物体的时候，把它加大
// far：远裁截面距离，如果有的物体被裁截掉看不到了，就需要调大 far 把它们包含进来
gui.add(camera2, "fov", [30, 60, 10]).onChange(onChange); //FOV(视野角度)
gui
  .add(camera2, "aspect", {
    "16/9": 16 / 9,
    "4/3": 4 / 3,
  })
  .onChange(onChange); //长宽比

gui.add(camera2, "near", 1, 300).onChange(onChange); //近裁剪面
gui.add(camera2, "far", 300, 800).onChange(onChange); //远裁剪面

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();
document.body.append(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
